<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>言志官网</title>
    <!-- css 文件 -->
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/foundation/5.5.3/css/foundation.min.css">
    <link rel="stylesheet" href="./css/base.css">
    <!-- jQuery 库 -->
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- JavaScript 文件 -->
    <script src="http://cdn.static.runoob.com/libs/foundation/5.5.3/js/foundation.min.js"></script>
    <!-- modernizr.js 文件 -->
    <script src="http://cdn.static.runoob.com/libs/foundation/5.5.3/js/vendor/modernizr.js"></script>

    <link rel="stylesheet" href="https://www.swiper.com.cn/dist/css/swiper.min.css">
    <script src="https://www.swiper.com.cn/dist/js/swiper.min.js"></script>
    <link rel="stylesheet" href="./css/animate.css">
</head>
<body>
    <style>
        .m_nav_box {
             display: none;
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 999999;
        width: 100%;
    }

    .wrapper .m-header {
        width: 100%;
        background: #fff;
        -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
        -moz-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
        box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
        height: 60px;
        box-sizing: border-box;
        padding: 20px 15px;
    }

    .wrapper .m-header .m-nav_left {
        float: left;
        display: flex;
        align-items: center;
    }

    .wrapper .m-header .m-nav_left img {
        width: 50%;
        margin-top: -7px;
    }

    .wrapper .m-header .m_nav_right {
        float: right;
    }

    .wrapper .m-header .m_nav_right > div {
        width: 40px;
        height: 3px;
        background-color: rgba(0, 0, 0, .5);
        margin-bottom: 5px;
    }

    .m-header-navgation {
        width: 50%;
        height: 1000px;
        background: rgba(0, 0, 0, .8);
        color: #ffffff;
        display: none;
        right: 0;
        position: absolute;
        transition: all 1s;
    }

    .m-header-navgation .m-nav-active {
        color: #fed130;
    }

    .m-header-navgation .nav-name {
        width: 100%;
        height: 55px;
        border-bottom: 1px solid #222;
        background: #040404;
        line-height: 55px;
        text-align: center;
        font-size: 16px;
    }

    .m-header-navgation .nav-name:hover {
        color: #fed130;
    }

    .m-header-navgation .up_content {
        display: none;
    }

    .m-header-navgation .up_content a {
        width: 100%;
        height: 40px;
        border-bottom: 1px solid #222;
        background: rgb(23, 23, 23);
        line-height: 40px;
        text-align: center;
        display: inline-block;
        color: #ffffff;
        font-size: 14px !important;
    }

    .m-header-navgation .up_content a:hover {
        color: #fed130;
    }
</style>
<div class="wrapper">
    <div class="m_nav_box">
        <div class="m-header">
            <div class="m-nav_left">
                <img src="./img/logo.png" alt="logo图片">
                <span class="font-fz-Futura" style="margin-left: 20px;font-size:14px;color:#000;">400 699 2002</span>
            </div>
            <div class="m_nav_right">
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        <div class="m-header-navgation">
            <div>
                <div class="nav-name m-nav-active"><a href="/">首页</a></div>
                </div>
                <div>
                    <div class="nav-name ">关于</div>
                <div class="up_content" style="">
                    <a href="/about_history.html#history">办学历史</a>
                    <a href="/about_history.html#env">艺术氛围</a>
                    <a href="/about_history.html#feature">教学特色</a>
                    <a href="/about_history.html#system">教学体系</a>
                    <a href="/about_history.html#result">教学成果</a>
                    <a href="/about_history.html#contact">联系方式</a>
                </div>
            </div>
            <div>
                <div class="nav-name ">招生</div>
            <div class="up_content" style="">
                <a href="/zhaosheng.html">招生简章</a>
                <a href="/wayTojion.html#method">报名方式</a>
                <a href="/wayTojion.html#guide">入学指南</a>
            </div>
            </div>
            <div>
                <div class="nav-name ">师资</div>
            <div class="up_content">
                <a href="/teacher.html">教师团队</a>
                <a href="/teach_work.html">作品欣赏</a>
                <a href="/teach_publish.html">出版物</a>
            </div>
            </div>
            <div>
                <div class="nav-name ">新闻</div>
            <div class="up_content" style="display: none;">
                    <a href="/news/typeid-1.html">招生新闻</a>
                    <a href="/news/typeid-2.html">教学成果</a>
                    <a href="/news/typeid-3.html">活动新闻</a>
                    <a href="/news/typeid-4.html">艺考资讯</a>
                    <a href="/news/typeid-13.html">岭上时光轴</a>
                </div>
            </div>
            <div>
                <div class="nav-name ">公开课</div>
            <div class="up_content" style="">
                    <a href="/public/id-1.html">素描公开课</a>
                    <a href="/public/id-2.html">色彩公开课</a>
                    <a href="/public/id-3.html">速写公开课</a>
                    <a href="/public/id-4.html">设计公开课</a>
                    <a href="/public/id-5.html">校考方向公开课</a>
                </div>
            </div>
            <div>
                <div class="nav-name ">逛校园</div>
            <div class="up_content" style="">
                    <a href="/school/id-1.html">杭州校区</a>
                    <a href="/school/id-2.html">南昌校区</a>
                    <a href="/school/id-3.html">沈阳校区</a>
                    <a href="/school/id-4.html">福州校区</a>
                    <a href="/school/id-5.html">南宁校区</a>
                </div>
            </div>
            <div>
                <div class="nav-name ">合作洽谈</div>
            <div class="up_content" style="">
                <a href="/cooperation.html">在线加盟</a>
                <a href="/blueunion.html#about">关于蓝盟</a>
                <a href="/blueunion.html#join">加入蓝盟</a>
            </div>
            </div>
            <div>
                <div class="nav-name "><a href="/zhaopin.html">人才招聘</a></div>
            <!--<div class="up_content">-->
            <!--<a href="/zhaopin.html">人才招聘</a>-->
            <!--</div>-->
            </div>
            <div>
                <div class="nav-name "><a href="/#contact_us">联系我们</a></div>
            <!--<div class="up_content">-->
            <!--<a href="/cooperation.html">合作洽谈</a>-->
            <!--</div>-->
            </div>
            <div>
                <div class="nav-name "><a href="/login.html">登录</a></div>
            <!--<div class="up_content">-->
            <!--<a href="/cooperation.html">合作洽谈</a>-->
            <!--</div>-->
            </div>
            <div>
                <div class="nav-name "><a href="/register.html">注册</a></div>
            <!--<div class="up_content">-->
            <!--<a href="/cooperation.html">合作洽谈</a>-->
            <!--</div>-->
            </div>
        </div>
    </div>
</div>
<div style="margin-top:60px;background:red;width: 100%;" class="moblieMargin"></div>
    <!-- header -->

    <div class="header">
        <div class="navbar panel">
            <a href="/" class="toplogo"><img src="./img/logo.png" alt=""></a>
            <div class="navrow">
                <a href="" class="homenav navcolumns active" >首页</a>
                <div  class="navcolumns">
                    <a href="#" data-dropdown="id01" class="button dropdown">关于言志</a>
                    <ul id="id01" data-dropdown-content class="f-dropdown">
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 2</a></li>
                        <li><a href="#">Link 3</a></li>
                    </ul>
                </div>
                <a href="" class="navcolumns" >校园漫步</a>
                <a href="" class="navcolumns" >师资介绍</a>
                <div  class="navcolumns">
                    <a href="#" data-dropdown="id01" class="button dropdown">关于言志</a>
                    <ul id="id01" data-dropdown-content class="f-dropdown">
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 2</a></li>
                        <li><a href="#">Link 3</a></li>
                    </ul>
                </div>
                <div  class="navcolumns">
                    <a href="#" data-dropdown="id01" class="button dropdown">关于言志</a>
                    <ul id="id01" data-dropdown-content class="f-dropdown">
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 2</a></li>
                        <li><a href="#">Link 3</a></li>
                    </ul>
                </div>
                <div  class="navcolumns">
                    <a href="#" data-dropdown="id01" class="button dropdown">关于言志</a>
                    <ul id="id01" data-dropdown-content class="f-dropdown">
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 2</a></li>
                        <li><a href="#">Link 3</a></li>
                    </ul>
                </div>
                <div  class="navcolumns">
                    <a href="#" data-dropdown="id01" class="button dropdown">关于言志</a>
                    <ul id="id01" data-dropdown-content class="f-dropdown">
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 2</a></li>
                        <li><a href="#">Link 3</a></li>
                    </ul>
                </div>
                <div  class="navcolumns">
                    <a href="#" data-dropdown="id01" class="button dropdown">关于言志</a>
                    <ul id="id01" data-dropdown-content class="f-dropdown">
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 2</a></li>
                        <li><a href="#">Link 3</a></li>
                    </ul>
                </div>
                <a href="" class="navcolumns" >登陆/注册</a>
            </div>
        </div>
    </div>
    <!-- indexbanner -->
    <div class="swiper-container indexbanner">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <span class="iconfont icon-bofang" id="js_playbtn"></span>
                <video class="bannervideo" id="indexbannervideo" src="./img/video.mp4"></video>
                <img src="./img/topbanner.png" alt="">
            </div>
            <div class="swiper-slide">
                <img src="./img/topbanner.png" alt="">
                <a href="" class="indexbaoming_btn">马上报名</a>
            </div>
        </div>
        <div class="swiper-button-next swiper-button-black"></div>
        <div class="swiper-button-prev swiper-button-black"></div>
    </div>
    <script>
        var swiper = new Swiper('.indexbanner', {
            navigation: {
                nextEl: '.indexbanner .swiper-button-next',
                prevEl: '.indexbanner .swiper-button-prev',
            },
        });
    </script>
    <!-- headerend -->

    <!-- index报名 -->
    <div class="indexbaomint">
        <div class="baomingcontent">
            <a href="" class="genduolink">招生简章<span class="linkicon"><i class="iconfont icon-arrow"></i><i class="iconfont icon-arrow"></i><i class="iconfont icon-arrow"></i></span></a>
            <p class="zminfo1">即日起参加预报名活动</p>
            <p class="zminfo2"><img src="./img/index/zkimg.png" alt=""></p>
            <p class="zminfo3">凡参与预报名活动学院，均可享受新学期学费不涨价优惠，前200名报名赠送iPad一台。</p>
            <div class="zhaoshengform">
                <input type="text" placeholder="姓名（必填）">
                <input type="text" placeholder="电话（必填）">
                <input type="text" placeholder="年纪">
                <div class="formtjbtn">
                    <button>预约报名</button>
                    <p>请留下您的联系方式<br>招生办老师将于24小时内与您沟通</p>
                </div>
            </div>
        </div>
    </div>
    <!-- end报名 -->

    <!-- 状元 -->
    <div class="zhuanyuaninfo">
        <div class="zyinfo">
            <a href="" class="genduolink">更多成绩<span class="linkicon"><i class="iconfont icon-arrow"></i><i class="iconfont icon-arrow"></i><i class="iconfont icon-arrow"></i></span></a>           
            <img src="./img/index/zybg.png" alt="">
        </div>
    </div>
    <!-- end状元 -->

   
    <div class="indexmain">
    
    <!-- 学校 -->
    <div class="indexschool">
        <div class="swiper-pagination"></div>
        <div class="schooltableft">
            <div class="swiper-container gallery-thumbs2">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">安徽省</div>
                    <div class="swiper-slide">安徽省</div>
                    <div class="swiper-slide">安徽省</div>
                    <div class="swiper-slide">安徽省</div>
                    <div class="swiper-slide">安徽省</div>
                    <div class="swiper-slide">安徽省</div>
                    <div class="swiper-slide">安徽省</div>
                    <div class="swiper-slide">安徽省</div>
                </div>
            </div>
            <div class="swiper-button-next1"><img src="./img/down_sy.png" alt=""></div>
            <div class="swiper-button-prev1"><img src="./img/upper_sy.png" alt=""></div>
        </div>
        <div class="schoolinfo">
            <div class=" gallery-top2">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="./img/index/dtimg.png" alt=""></div>
                    <div class="swiper-slide"><img src="./img/index/dtimg.png" alt=""></div>
                    <div class="swiper-slide"><img src="./img/index/dtimg.png" alt=""></div>
                    <div class="swiper-slide"><img src="./img/index/dtimg.png" alt=""></div>
                    <div class="swiper-slide"><img src="./img/index/dtimg.png" alt=""></div>
                    <div class="swiper-slide"><img src="./img/index/dtimg.png" alt=""></div>
                    <div class="swiper-slide"><img src="./img/index/dtimg.png" alt=""></div>
                    <div class="swiper-slide"><img src="./img/index/dtimg.png" alt=""></div>
                </div>
            </div>
        </div>
    </div>
    <script>
     var galleryThumbs2 = new Swiper('.gallery-thumbs2', {
      spaceBetween: 30,
      direction: 'vertical',
      slidesPerView: 4,
      freeMode: true,
      watchSlidesVisibility: true,
      watchSlidesProgress: true,
    });
    new Swiper('.gallery-top2', {
      spaceBetween: 10,
      navigation: {
        nextEl: '.indexschool .swiper-button-next1',
        prevEl: '.indexschool .swiper-button-prev1',
      },
      thumbs: {
        swiper: galleryThumbs2
      },
      loop: true,
        pagination: {
            el: '.indexschool .swiper-pagination',
            type: 'fraction',
        }
    });

    </script>

    <!-- end scholl -->

    <div class="scoltabs">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide xueyuaninfo">
                    <h3>中国美术学院</h3>
                    <span class="xulogo"><img src="./img/index/logo_my1.png" alt=""></span>
                    <div class="ssinfoval">
                        <h4>2018年</h4>
                        <p>参考人数124人</p>
                        <p>参考人数124人</p>
                        <p>参考人数124人</p>
                        <p>参考人数124人</p>
                        <h4>2018年</h4>
                        <p>参考人数124人</p>
                        <p>参考人数124人</p>
                        <p>参考人数124人</p>
                        <p>参考人数124人</p>
                        <h4>2018年</h4>
                        <p>参考人数124人</p>
                        <p>参考人数124人</p>
                    </div>
                </div>
                <div class="swiper-slide xueyuaninfo">
                    <h3>中国美术学院</h3>
                    <span class="xulogo"><img src="./img/index/logo_my1.png" alt=""></span>
                    <div class="ssinfoval">
                        <h4>2018年</h4>
                        <p>参考人数124人</p>
                        <p>参考人数124人</p>
                        <p>参考人数124人</p>
                        <p>参考人数124人</p>
                        <h4>2018年</h4>
                        <p>参考人数124人</p>
                        <p>参考人数124人</p>
                        <p>参考人数124人</p>
                        <h4>2018年</h4>
                        <p>参考人数124人</p>
                        <p>参考人数124人</p>
                        <p>参考人数124人</p>
                    </div>
                </div>
                <div class="swiper-slide xueyuaninfo">
                    <h3>中国美术学院</h3>
                    <span class="xulogo"><img src="./img/index/logo_my1.png" alt=""></span>
                    <div class="ssinfoval">
                        <h4>2018年</h4>
                        <p>参考人数124人</p>
                        <p>参考人数124人</p>
                        <p>参考人数124人</p>
                        <p>参考人数124人</p>
                        <h4>2018年</h4>
                        <p>参考人数124人</p>
                        <p>参考人数124人</p>
                        <p>参考人数124人</p>
                    </div>
                </div><div class="swiper-slide xueyuaninfo">
                        <h3>中国美术学院</h3>
                        <span class="xulogo"><img src="./img/index/logo_my1.png" alt=""></span>
                        <div class="ssinfoval">
                            <h4>2018年</h4>
                            <p>参考人数124人</p>
                            <p>参考人数124人</p>
                            <p>参考人数124人</p>
                            <p>参考人数124人</p>
                            <h4>2018年</h4>
                            <p>参考人数124人</p>
                            <p>参考人数124人</p>
                            <p>参考人数124人</p>
                            <p>参考人数124人</p>
                            <h4>2018年</h4>
                            <p>参考人数124人</p>
                            <p>参考人数124人</p>
                            <p>参考人数124人</p>
                            <p>参考人数124人</p>
                        </div>
                    </div>
                    <div class="swiper-slide xueyuaninfo">
                        <h3>中国美术学院</h3>
                        <span class="xulogo"><img src="./img/index/logo_my1.png" alt=""></span>
                        <div class="ssinfoval">
                            <h4>2018年</h4>
                            <p>参考人数124人</p>
                            <p>参考人数124人</p>
                            <p>参考人数124人</p>
                            <p>参考人数124人</p>
                            <h4>2018年</h4>
                            <p>参考人数124人</p>
                            <p>参考人数124人</p>
                            <p>参考人数124人</p>
                            <p>参考人数124人</p>
                            <h4>2018年</h4>
                            <p>参考人数124人</p>
                            <p>参考人数124人</p>
                            <p>参考人数124人</p>
                            <p>参考人数124人</p>
                        </div>
                    </div><div class="swiper-slide xueyuaninfo">
                            <h3>中国美术学院</h3>
                            <span class="xulogo"><img src="./img/index/logo_my1.png" alt=""></span>
                            <div class="ssinfoval">
                                <h4>2018年</h4>
                                <p>参考人数124人</p>
                                <p>参考人数124人</p>
                                <p>参考人数124人</p>
                            </div>
                        </div>
                        <div class="swiper-slide xueyuaninfo">
                                <h3>中国美术学院</h3>
                                <span class="xulogo"><img src="./img/index/logo_my1.png" alt=""></span>
                                <div class="ssinfoval">
                                    <h4>2018年</h4>
                                    <p>参考人数124人</p>
                                    <p>参考人数124人</p>
                                    <p>参考人数124人</p>
                                    <p>参考人数124人</p>
                                    <h4>2018年</h4>
                                    <p>参考人数124人</p>
                                    <p>参考人数124人</p>
                                    <p>参考人数124人</p>
                                    <p>参考人数124人</p>
                                    <h4>2018年</h4>
                                    <p>参考人数124人</p>
                                    <p>参考人数124人</p>
                                    <p>参考人数124人</p>
                                    <p>参考人数124人</p>
                                </div>
                            </div>
                            <div class="swiper-slide xueyuaninfo">
                                    <h3>中国美术学院</h3>
                                    <span class="xulogo"><img src="./img/index/logo_my1.png" alt=""></span>
                                    <div class="ssinfoval">
                                        <h4>2018年</h4>
                                        <p>参考人数124人</p>
                                        <p>参考人数124人</p>
                                        <p>参考人数124人</p>
                                        <p>参考人数124人</p>
                                        <h4>2018年</h4>
                                        <p>参考人数124人</p>
                                        <p>参考人数124人</p>
                                        <p>参考人数124人</p>
                                        <p>参考人数124人</p>
                                        <h4>2018年</h4>
                                        <p>参考人数124人</p>
                                        <p>参考人数124人</p>
                                        <p>参考人数124人</p>
                                        <p>参考人数124人</p>
                                    </div>
                                </div>
            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-next swiper-button-black"></div>
            <div class="swiper-button-prev swiper-button-black"></div>        
            <a href="" class="genduolink">美院战绩<span class="linkicon"><i class="iconfont icon-arrow"></i><i class="iconfont icon-arrow"></i><i class="iconfont icon-arrow"></i></span></a>        
        </div>
    </div>
    <style>
    .xueyuaninfo{width:157px;padding-top:54px;}
    .ssinfoval{padding-left:32px;}
    .ssinfoval h4{font-size:14px;color:#000;margin:6px 0 4px;padding:0;border-bottom:solid 2px #000;line-height:30px;    display: block;width: 53px;font-weight: bold;}
    .ssinfoval p{font-size:12px;color:#000;line-height:18px;font-weight: bold;margin:0;padding:0;}
    .xueyuaninfo h3{margin:0;padding:0;width:157px;;line-height:36px;border-radius: 18px;text-align: center;border:solid 1px #333;font-size:16px;font-weight: bold;color:#333;}
    .scoltabs{padding:0 40px;height:585px;background:url(./img/index/sginfobg.png) top right no-repeat;width:1440px;margin:40px auto 40px;}
    .scoltabs .swiper-slide-active h3{background:#f09318;color:#fff;border-color:#f09318;}
        .xulogo{margin:29px auto 20px;width:50px;display: block;}
    .scoltabs .swiper-container{width:100%;height:100%;padding:0 80px;}
    .scoltabs .swiper-pagination{width:50px;font-size:18px;color:#000;left:120px;}
    .scoltabs .genduolink{color:#fff;z-index: 5;bottom:30px;right:0;}
    </style>
    <script>
        var swiper = new Swiper('.scoltabs .swiper-container', {
            spaceBetween: 100,
            slidesPerView: 5,
            freeMode: true,
            watchSlidesVisibility: true,
            watchSlidesProgress: true,
            navigation: {
                nextEl: '.scoltabs .swiper-button-next',
                prevEl: '.scoltabs .swiper-button-prev',
            },
            pagination: {
                el: '.scoltabs .swiper-pagination',
                type: 'fraction',
            }
        });
    </script>

    <!-- 新闻资讯 -->
    <div class="indexzuopinji indexnewsdata">
        <a href="" class="genduolink">新闻资讯<span class="linkicon"><i class="iconfont icon-arrow"></i><i class="iconfont icon-arrow"></i><i class="iconfont icon-arrow"></i></span></a>
        <div class="zuopintabbar">
            <ul class="tabs" data-tab="">
                <li class="tab-title active"><a href="#xiaoyuan" aria-selected="true" tabindex="0">校园时光</a></li>
                <li class="tab-title"><a href="#jiaoxue" aria-selected="false" tabindex="0">教学成果</a></li>
                <li class="tab-title"><a href="#jiaoxue1" aria-selected="false" tabindex="0">招生新闻</a></li>
                <li class="tab-title"><a href="#jiaoxue2" aria-selected="false" tabindex="0">艺考资讯</a></li>                
            </ul>            
        </div>
        <div class="tabs-content">
            <div class="content zuopincontent active" id="xiaoyuan" aria-hidden="false">
                <div class="row">
                    <a href="" class="small-3 columns">
                        <img src="./img/index/news-img.png" alt="">
                        <span class="newsitemtitle">年度账单 | 美术生的年度账单</span>
                    </a>
                    <a href="" class="small-3 columns">
                        <img src="./img/index/news-img.png" alt="">
                        <span class="newsitemtitle">年度账单 | 美术生的年度账单</span>
                    </a>
                    <a href="" class="small-3 columns">
                        <img src="./img/index/news-img.png" alt="">
                        <span class="newsitemtitle">年度账单 | 美术生的年度账单</span>
                    </a>
                    <a href="" class="small-3 columns">
                        <img src="./img/index/news-img.png" alt="">
                        <span class="newsitemtitle">年度账单 | 美术生的年度账单</span>
                    </a>
                </div>
            </div>
            <div class="content zuopincontent" id="jiaoxue" aria-hidden="true">
                <div class="row">
                    <a href="" class="small-3 columns"><img src="./img/zuopin.png" alt=""></a>
                    <a href="" class="small-3 columns"><img src="./img/zuopin.png" alt=""></a>
                    <a href="" class="small-3 columns"><img src="./img/zuopin.png" alt=""></a>
                    <a href="" class="small-3 columns"><img src="./img/zuopin.png" alt=""></a>
                </div>
            </div>
            <div class="content zuopincontent" id="jiaoxue1" aria-hidden="true">
                <h3>菜单 3</h3>
                <p>一些文本内容 2</p>
            </div>
            <div class="content zuopincontent" id="jiaoxue2" aria-hidden="true">
                <h3>菜单 4</h3>
                <p>一些文本内容 3</p>
            </div>           
        </div>
    </div>
    <style>
    .newsitemtitle{position:absolute;text-align:center;line-height:40px;font-size:10px;bottom:0;left:0;width:100%;background:rgba(0,0,0,.3);color:#fff;}
    .indexnewsdata .tabs-content .columns{position: relative;padding:0;width:300px;height:200px;margin-right:30px;}
    .indexnewsdata .tabs-content{width:1320px;}
    .indexnewsdata .zuopintabbar{padding-left:180px;}
    .indexnewsdata .tab-title a{margin-left:60px !important;}
    </style>
    <!-- end新闻资讯 -->
    
    <!-- 师资力量 -->
    <div class="shiziinfo">
        <a href="" class="genduolink">师资实力<span class="linkicon"><i class="iconfont icon-arrow"></i><i class="iconfont icon-arrow"></i><i class="iconfont icon-arrow"></i></span></a>        
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img class="lbimg" src="./img/index/indextab.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img class="lbimg" src="./img/index/indextab.png" alt="">
                </div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
            <!-- Add Arrows -->
            <div class="swiper-button-next swiper-button-white"></div>
            <div class="swiper-button-prev swiper-button-white"></div>
        </div>
    </div>
    <style>
    .shiziinfo{min-width:1440px;height:720px;margin:0 auto;position:relative;}
    .shiziinfo .swiper-container{width:100%;height:100%;}
    .shiziinfo .swiper-button-next{right:50px;}
    .shiziinfo .lbimg{width:100%;}
    .shiziinfo .swiper-button-prev{left:50px;}
    .shiziinfo .genduolink{z-index: 5;left:50%;top:31px;color:#fff;margin-left: 575px;}
    .shiziinfo .swiper-pagination{display:block;font-weight: bold;font-size:20px;right:100px;bottom:30px;color:#fff;left: inherit;width:80px;}
    .shiziinfo  .swiper-pagination-current{font-size:50px;}
    </style>
     <script>
        var swiper = new Swiper('.shiziinfo .swiper-container', {
            loop: true,
            pagination: {
                el: '.shiziinfo .swiper-pagination',
                type: 'fraction',
            },
            navigation: {
            nextEl: '.shiziinfo .swiper-button-next',
            prevEl: '.shiziinfo .swiper-button-prev',
            },
        });
    </script>
    <!-- end 师资力量 -->

    <!-- 校园 -->    
    <style>
    .swiper-container {
      width: 100%;
      margin-left: auto;
      margin-right: auto;
    }
   .msgtable .swiper-slide {
      background-size: cover;
      background-position: center;
    }
    .gallery-top {
      height: 720px;
      width: 100%;
    }
    .gallery-thumbs {
      box-sizing: border-box;
      padding: 33px 0;
      width:1200px;margin:0 auto;
    }
    .gallery-thumbs .swiper-slide {
      width: 25%;
      height: 100%;
      opacity: 0.6;
    }
    .gallery-thumbs .swiper-slide-thumb-active {
      opacity: 1;
    }
    .gallery-thumbs .swiper-slide{width:210px;height:148px;}
    .msgtable{position:relative;min-width:1440px;}
    .msgdbtabview{position:absolute;width:100%;bottom:0;left:0;background:rgba(0,0,0,.3);z-index:2;}    
    .msgtable .swiper-button-next,.msgtable .swiper-button-prev{top:86%;}
    .swiper-button-next:focus, .swiper-button-prev:focus{outline: none;}
    .msgtable .swiper-button-prev{left:40px;}
    .msgtable .swiper-button-next{right:40px;}
    .msgtable .genduolink{z-index:5;color:#ffffff;position:absolute;top:30px;left:50%;margin-left:575px;}
    </style>
    <div class="msgtable">
        <a href="" class="genduolink">漫步校园<span class="linkicon"><i class="iconfont icon-arrow"></i><i class="iconfont icon-arrow"></i><i class="iconfont icon-arrow"></i></span></a>
        <div class="swiper-container gallery-top">
            <div class="swiper-wrapper">
                <div class="swiper-slide" style="background-image:url(./img/index/img1.png)"></div>
                <div class="swiper-slide" style="background-image:url(./img/index/img1.png)"></div>
                <div class="swiper-slide" style="background-image:url(./img/index/img1.png)"></div>
            </div>
        </div>
        <div class="swiper-button-next swiper-button-white"></div>
        <div class="swiper-button-prev swiper-button-white"></div>
        <div class="msgdbtabview">
            <div class="swiper-container gallery-thumbs">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" style="background-image:url(./img/index/slv-img1.png)"></div>
                    <div class="swiper-slide" style="background-image:url(./img/index/slv-img1.png)"></div>
                    <div class="swiper-slide" style="background-image:url(./img/index/slv-img1.png)"></div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        var galleryThumbs = new Swiper('.gallery-thumbs', {
            spaceBetween: 20,
            slidesPerView: 4,
            freeMode: true,
            watchSlidesVisibility: true,
            watchSlidesProgress: true,
        });
        var galleryTop = new Swiper('.gallery-top', {
            spaceBetween: 10,
            navigation: {
                nextEl: '.gallery-top .swiper-button-next',
                prevEl: '.gallery-top .swiper-button-prev',
            },
            thumbs: {
                swiper: galleryThumbs
            }
        });
    </script>
    <!-- end校园 -->

    <!-- 公开课  -->
    <div class="gkkview">
        <div class="gkkcontent">
            <a href="" class="genduolink">线上课程<span class="linkicon"><i class="iconfont icon-arrow"></i><i class="iconfont icon-arrow"></i><i class="iconfont icon-arrow"></i></span></a>
            <div class="xsbminfo">
                <div class="xsbmtab">
                    <a href="" class="active">素描课</a>
                    <a href="" class="">色彩课</a>
                    <a href="" class="">招生新闻</a>
                </div>
                <div class="zxbmbtn">
                    <p class="btn">立即报名</p>
                    <p class="iconfont icon--xiangxiajiantou"></p>
                    <p class="iconfont icon--xiangxiajiantou"></p>
                </div>
            </div>
        </div>
    </div>
    <style>
    .gkkview{background:#f09318;}
    .gkkcontent{background:url(./img/index/gkk.png) top center;position:relative;width:1440px;height:720px;margin:0 auto;}
    .gkkcontent .genduolink{color:#fff;top:31px;right:45px;}
    .xsbminfo{width:630px;position:absolute;bottom:50px;right:60px;}
    .xsbmtab a{width:156px;height:36px;text-align: center;line-height:36px;font-size:16px;font-weight:bold;border-radius: 18px;border:solid 1px #151765;color:#151765;margin:0 20px;display:inline-block;}
    .xsbmtab a.active{background:#151765;color:#ffffff;}
    .zxbmbtn{text-align:center;margin-top:50px;}
    .zxbmbtn .btn{font-size:16px;color:#333333;font-weight: bold;margin:0;}
    .zxbmbtn .iconfont{margin-bottom:-21px;font-size:17px;color:#333333;}
    </style>

    <!-- 作品 -->
    <div class="indexzuopinji">
        <a href="" class="genduolink">更多作品<span class="linkicon"><i class="iconfont icon-arrow"></i><i class="iconfont icon-arrow"></i><i class="iconfont icon-arrow"></i></span></a>
        <div class="zuopintabbar">
            <ul class="tabs" data-tab="">
                <li class="tab-title active"><a href="#sumiao">素描作品</a></li>
                <li class="tab-title"><a href="#secai">色彩作品</a></li>
                <li class="tab-title"><a href="#secai1">色彩作品</a></li>
                <li class="tab-title"><a href="#secai2">色彩作品</a></li>
                <li class="tab-title"><a href="#secai3">色彩作品</a></li>
                <li class="tab-title"><a href="#secai4">色彩作品</a></li>
            </ul>            
        </div>
        <div class="tabs-content">
            <div class="content active zuopincontent" id="sumiao">
              <div class="row">
                <a href="" class="small-3 columns"><img src="./img/zuopin.png" alt=""></a>
                <a href="" class="small-3 columns"><img src="./img/zuopin.png" alt=""></a>
                <a href="" class="small-3 columns"><img src="./img/zuopin.png" alt=""></a>
                <a href="" class="small-3 columns"><img src="./img/zuopin.png" alt=""></a>
              </div>
            </div>
            <div class="content zuopincontent" id="secai">
                <div class="row">
                    <a href="" class="small-3 columns"><img src="./img/zuopin.png" alt=""></a>
                    <a href="" class="small-3 columns"><img src="./img/zuopin.png" alt=""></a>
                    <a href="" class="small-3 columns"><img src="./img/zuopin.png" alt=""></a>
                    <a href="" class="small-3 columns"><img src="./img/zuopin.png" alt=""></a>
                </div>
            </div>
            <div class="content zuopincontent" id="secai1">
              <h3>菜单 3</h3>
              <p>一些文本内容 2</p>
            </div>
            <div class="content zuopincontent" id="secai2">
              <h3>菜单 4</h3>
              <p>一些文本内容 3</p>
            </div>
            <div class="content zuopincontent" id="secai3">
                <h3>菜单 5</h3>
                <p>一些文本内容 3</p>
            </div>
            <div class="content zuopincontent" id="secai4">
                <h3>菜单 6</h3>
                <p>一些文本内容 3</p>
            </div>
        </div>
    </div>
    <style>
    .zuopintabbar .tab-title a{width:156px;height:36px;text-align: center;line-height:36px;font-size:16px;font-weight:bold;background:none;border-radius: 18px;border:solid 1px #939393;color:#333;margin:0 0 0 28px;padding:0;}
    .zuopintabbar .tab-title.active a,.zuopintabbar .tab-title a:hover{background:#151765;color:#ffffff;}
    .zuopintabbar .tab-title a:active, .zuopintabbar .tab-title a:focus{outline: none;}
    .indexzuopinji{width:1370px;margin:0 auto;padding:60px 0 30px;position: relative;}
    .zuopincontent .row{max-width:100%;}
    .zuopincontent{margin-top:60px;}
    .zuopintabbar{padding-left:110px;}
    .tabs-content > .content.active {
        -webkit-animation: fadeEffect 1s;
        animation: fadeEffect 1s;
    }
    .indexzuopinji .genduolink{color:#333;top:65px;}    
    @-webkit-keyframes fadeEffect {
        from {opacity: 0;}
        to {opacity: 1;}
    }

    @keyframes fadeEffect {
        from {opacity: 0;}
        to {opacity: 1;}
    }
    </style>
    <!-- end作品 -->

    <!-- 表单提交 -->
    <div class="indexfrom">
        <div class="yzindeximg"><img src="./img/index/img001.png" alt=""></div>
        <div class="indexfromview">
            <form action="">
                <label for="name">
                    <span  class="labeltext">姓名（必填）</span>
                    <input type="text"  id="name">
                </label>
                <label for="name">
                    <span  class="labeltext">电话（必填）</span>
                    <input type="text"  id="name">
                </label>
                <label for="name">
                    <span  class="labeltext">微信/QQ（必填）</span>
                    <input type="text"  id="name">
                </label>
                <label for="name">
                    <span  class="labeltext">地址</span>
                    <input type="text"  id="name">
                </label>
                <p class="labeltext">留言</p>
                <textarea rows="4"></textarea>
                <p class="labeltext">校园地址：杭州市萧山区楼塔镇言志美术（萧山校区）</p>
                <p class="labeltext">联系电话：0571-5810 5578</p>
                <div class="text-center formtjbtn">
                    <button>预约报名</button>
                    <p>请留下您的联系方式<br>招生办老师将于24小时内与您沟通</p>
                </div>
            </form>
        </div>
    </div>
    <style>
    .indexfrom{padding:60px 0 150px;width:1440px;margin:0 auto;position:relative;}
    .indexfromview{right:34px;top:90px;width:477px;position:absolute;}
    .indexfromview label{width:225px;display: inline-block;margin-top:14px;}
    .indexfromview label:nth-child(odd){margin-right:20px;}
    input[type='text']{border-radius: 4px;border-color:#f2f2f2;}
    .indexfromview .labeltext{margin:0;color:#333;font-size:14px;}
    .indexfromview textarea{border-radius: 4px;border-color:#f2f2f2;height:120px;margin-bottom:5px;}
    .formtjbtn{margin-top:14px;}
    .formtjbtn button{width:156px;height:36px;line-height:36px;border-radius: 18px;color:#ffffff;background:#151765;padding:0;margin-bottom:11px;}
    .formtjbtn button:active, .formtjbtn button:focus{outline: none;}
    .formtjbtn p{font-size:12px;color:#333;line-height:15px;}
    </style>
    <!-- end form -->
    </div>
    <!-- map -->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=E17196ee6b0851315b7c9503f40060c9"></script>
    <div class="indexmap" id="allmap"></div>
    <script type="text/javascript">
        // 百度地图API功能
        var map = new BMap.Map("allmap");           // 创建Map实例
        map.centerAndZoom(new BMap.Point(120.193537,30.244818), 12);  //初始化时，即可设置中心点和地图缩放级别。
        // map.enableScrollWheelZoom(true);
        map.enableDragging();   //两秒后开启拖拽
    </script>
    <!-- map -->

    <!-- footbar -->
    <div class="footbar">
        <div class="footbaritem">
            <h3 class="footbartitle">关于言志</h3>
            <div class="footnavwp">
                <ul class="footnavlist">
                    <li><a href="">简介</a></li>
                    <li><a href="">教学环境</a></li>
                    <li><a href="">教学体系</a></li>
                    <li><a href="">教学特色</a></li>
                </ul>
            </div>
        </div>
        <div class="footbaritem">
            <h3 class="footbartitle">关于言志</h3>
            <div class="footnavwp">
                <ul class="footnavlist">
                    <li><a href="">简介</a></li>
                    <li><a href="">教学环境</a></li>
                    <li><a href="">教学体系</a></li>
                    <li><a href="">教学特色</a></li>
                </ul>
            </div>
        </div>
        <div class="footbaritem">
            <h3 class="footbartitle">关于言志</h3>
            <div class="footnavwp">
                <ul class="footnavlist">
                    <li><a href="">简介</a></li>
                    <li><a href="">教学环境</a></li>
                    <li><a href="">教学体系</a></li>
                    <li><a href="">教学特色</a></li>
                </ul>
            </div>
        </div>
        <div class="footbaritem">
            <h3 class="footbartitle">关于言志</h3>
            <div class="footnavwp">
                <ul class="footnavlist">
                    <li><a href="">简介</a></li>
                    <li><a href="">教学环境</a></li>
                    <li><a href="">教学体系</a></li>
                    <li><a href="">教学特色</a></li>
                </ul>
                <ul class="footnavlist">
                    <li><a href="">简介</a></li>
                    <li><a href="">教学环境</a></li>
                    <li><a href="">教学体系</a></li>
                    <li><a href="">教学特色</a></li>
                </ul>
            </div>
        </div>
        <div class="footbaritem">
            <h3 class="footbartitle">关于言志</h3>
            <div class="footnavwp">
                <ul class="footnavlist">
                    <li><a href="">简介</a></li>
                    <li><a href="">教学环境</a></li>
                    <li><a href="">教学体系</a></li>
                    <li><a href="">教学特色</a></li>
                </ul>
            </div>
        </div>
        <div class="footbaritem">
            <h3 class="footbartitle">关于言志</h3>
            <div class="footnavwp">
                <ul class="footnavlist">
                    <li><a href="">简介</a></li>
                    <li><a href="">教学环境</a></li>
                    <li><a href="">教学体系</a></li>
                    <li><a href="">教学特色</a></li>
                </ul>
            </div>
        </div>
        <div class="footbaritem">
            <h3 class="footbartitle">关于言志</h3>
            <div class="footnavwp">
                <ul class="footnavlist">
                    <li><a href="">简介</a></li>
                    <li><a href="">教学环境</a></li>
                    <li><a href="">教学体系</a></li>
                    <li><a href="">教学特色</a></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- footer -->
    <div class="footer">
        <div class="row">
            <div class="left">
                <div class="ftphoneinfo"><i class="iconimg"><img src="./img/icon-phone.png" /></i><span class="bmrx">报名热线：</span><strong class="bmtel">0571-5810-5578</strong></div>
                <div class="copyrightinfo">浙ICP备18024749号 公安机关备案号:3301830200094</div>
            </div>
            <div class="right footwlinfo">
                <span class="gzinfo">关注我们：</span>
                <span class="icon-img"><img src="./img/icon-wechat.png" alt=""></span>
                <span class="icon-img"><img src="./img/icon-weibo.png" alt=""></span>
            </div>
        </div>
    </div>
    <!-- endfooter -->
</body>
<script src="./js/commond.js"></script>
<script>
    function scrollnumber(element, cssname, offset) {
        var a, b, c, d;
        d = $(element).offset().top;
        a = eval(d + offset);
        b = $(window).scrollTop();
        c = $(window).height();
        if (b + c > a) {
            $((element)).addClass((cssname));
        }else{
            $(element).removeClass(cssname);
        }

        // $(element).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
        //     $(this).removeClass(cssname);
        // });
    }


    function scrollfun() {
        scrollnumber(".schooltableft", 'bounceInLeft animated', 100);
        scrollnumber(".schoolinfo", 'bounceInRight animated', 100);
        scrollnumber(".yzindeximg", 'bounceInLeft animated', 100);
        scrollnumber(".indexfromview", 'bounceInRight animated', 100);
    }

$(function(){
    /*动画效果*/
    scrollfun();
    $(window).scroll(function () {
        scrollfun();
    });



   $(".m_nav_right").click(function(){
       if($(".m-header-navgation").is(":hidden")){
            $(".m-header-navgation").show();
       }else{
            $(".m-header-navgation").hide();
       }
   });

   $(".nav-name ").click(function(){
       $(".up_content").hide();

       $(this).siblings(".up_content").show();
   })

   $("#js_playbtn").click(function(){
        var indexbannervideo = document.getElementById("indexbannervideo");
        $("#indexbannervideo").show();
        $(".indexbaoming_btn").hide();
        indexbannervideo.play();

        setTimeout(function(){
            $("#js_playbtn").hide();
            $("#indexbannervideo").hide();
            $(".indexbaoming_btn").show();
        }, 20000)
   });
})

</script>
</html>